<template>
  <view>
    <view>测试代码</view>
    <button @click="onclick">给from表单添加 inpValue</button>
    <view>
        <input type="text" v-model="form.inpValue" />
    </view>
    <!-- uni-swipe组件的使用 -->
    <uni-swipe-action>
      <!-- 基础用法 -->
      <uni-swipe-action-item
        :right-options="options"
        :left-options="options"
        @click="onClick"
        @change="swipeChange"
      >
        <view>SwipeAction 基础使用场景</view>
      </uni-swipe-action-item>
      <!-- 使用插槽 （请自行给定插槽内容宽度）-->
      <uni-swipe-action-item>
        <template v-slot:left>
          <view><text>置顶</text></view>
        </template>
        <view>
          <text>使用插槽</text>
        </view>
        <template v-slot:right>
          <view><text>删除</text></view>
        </template>
      </uni-swipe-action-item>
      <!-- 混合用法 -->
      <uni-swipe-action-item :right-options="options">
        <template v-slot:left>
          <view><text>置顶</text></view>
        </template>
        <view><text>混合使用</text></view>
      </uni-swipe-action-item>
    </uni-swipe-action>

    <!-- 禁止滑动 -->
    <uni-swipe-action>
      <uni-swipe-action-item :disabled="true" :right-options="options">
        <view>SwipeAction 基础使用场景</view>
      </uni-swipe-action-item>
    </uni-swipe-action>

    <!-- 按组使用 -->
    <uni-swipe-action>
      <uni-swipe-action-item
        :right-options="options"
        @click="bindClick"
        @change="swipeChange($event, index)"
      >
        <view>item1</view>
      </uni-swipe-action-item>
      <uni-swipe-action-item
        :right-options="options"
        @click="bindClick"
        @change="swipeChange($event, index)"
      >
        <view>item2</view>
      </uni-swipe-action-item>
      <uni-swipe-action-item
        :right-options="options"
        @click="bindClick"
        @change="swipeChange($event, index)"
      >
        <view>item3</view>
      </uni-swipe-action-item>
    </uni-swipe-action>
  </view>
</template>

<script>
/* 
       vue  针对 data中的对象，  如果 对象中后期才新增一个属性， vue无法监控到！！！
    当新增的数据发生修改了之后， vue中的监视不生效  无法绑定 

    1 vue2 天然存在这个问题  vue2双向绑定的底层 Object.defineProperty -- 无法对新增的属性做监控
      1 提出了解决方案   vue2 提出api专门来解决这个问题

        Vue.$set(对象,"属性名","属性值")
        this.$set(对象,"属性名","属性值")

        
    2 vue3 不存在这个温觉  vue3双向绑定的底层 新api proxy -- 对象 全方位的把控 
 */
export default {
  data(){
    return{
      form:{
        // 一开始就存在的数据
        // inpValue: "你好鸭",
     },
     options: [
        {
          text: "取消",
          style: {
            backgroundColor: "#007aff",
          },
        },
        {
          text: "确认",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
    }
  },
  methods:{
    onclick(){
      // inpValue  后期动态给form 新增的属性
    //   this.form.inpValue = "大家好呀";

      // 对于 点语法无法生效-新增的属性 可以修改为 $set 来更新
    //   this.$set(this.form, "inpValue", "大家好呀");
    },
    onClick(e) {
      console.log(
        "点击了" +
          (e.position === "left" ? "左侧" : "右侧") +
          e.content.text +
          "按钮"
      );
    },
    swipeChange(e, index) {
      console.log("当前状态：" + e + "，下标：" + index);
    },
  }
}
</script>

<style>

</style>